<template>
	<view>
		<view class="header">
			<uni-title type="h1" title="自助零售平台" align="center" color="#00aaff"></uni-title>
		</view>
		<view class="body">
			<view class="margin-tb-30">
				<uni-title type="h4" title="员工登录成功后，可通过此平台进行销售额查看、设备状态、订单信息等数据，同时也可以进行补货、更换商品等操作。"/>
			</view>
			<view class="ts">*仅限于已在PC端后台注册过的手机号登录</view>
			<button type="primary" open-type="getRealtimePhoneNumber" @getrealtimephonenumber="getUserPhone">授权登录</button>
			<!-- <button type="primary" @click="getUserInfoByPhone">授权登录</button> -->
		</view>
		<uni-popup ref="pickerView" type="bottom" :safe-area="false" :is-mask-click="false">
			<view class="popup-view">
				<view class="popup-view-header">
					<view class="popup-view-confirm" @click="pickerConfirm"> 确认 </view>
				</view>
				<picker-view :value="selected" @change="handleSelectedMerchant" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in merchantList" :key="index">{{item.merchantName}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: "",
				userType: "1",
				phone: "",
				merchantList: [],
				selected: 0
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(uid) {
				uni.switchTab({
					url:'/pages/index/index'
				})
			} else {
				uni.clearStorage()
			}
		},
		
		methods: {
			getUserPhone(e) {
				let { detail } = e
				
				if(detail.errMsg == "getPhoneNumber:ok") {
					let code = detail.code
					uni.request({
						url: getApp().globalData.apiUrl + '/card/api/v1/getPhoneNumber',
						data: {
							code
						},
						success: res => {
							if(res.data.success) {
								this.phone = res.data.result.phoneNumber
								this.getUserInfoByPhone()
							} else {
								uni.showToast({
									icon:'error',
									title:'用户未注册'
								})
							}
						}
					})
				}
			},
			
			getUserInfoByPhone() {
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getUserInfo',
					data: {
						phone: this.phone
					},
					success: res => {
						if(res.data.success) {
							let merchantList = res.data.result.merchantList
							if(merchantList.length > 0) {
								this.uid = res.data.result.userId
								this.userType = res.data.result.type
								this.merchantList = merchantList
								this.$refs.pickerView.open()
							} else {
								uni.showToast({
									icon:'error',
									title:'未找到角色',
									duration: 2000
								})
							}
						} else {
							uni.showToast({
								icon:'error',
								title:'用户未注册'
							})
						}
					}
				})
			},
			
			handleSelectedMerchant( e ) {
				this.selected = e.target.value
			},
			
			pickerConfirm() {
				this.$refs.pickerView.close();
				this.handleLoginSuccess()
			},
			
			handleLoginSuccess() {
				let uid = this.uid
				let phone = this.phone
				let userType = this.userType
				let merchantId = this.merchantList[this.selected].merchantId
				let merchantName = this.merchantList[this.selected].merchantName
				uni.setStorageSync('uid', uid)
				uni.setStorageSync('phone', phone)
				uni.setStorageSync('mid', merchantId)
				uni.setStorageSync('mname', merchantName)
				uni.setStorageSync('userType', userType)
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	
	.header {
		margin-top: 100rpx;
	}
	
	.body {
		padding: 30rpx;
	}
	
	.ts {
		color: #ff0000;
		font-size: 26rpx;
		margin: 20rpx 10rpx;
	}
	
	.popup-view {
		background-color: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
		.popup-view-header {
			text-align: center;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			view {
				max-width: 50%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 28rpx;
				font-size: 34rpx;
				line-height: 90rpx;
				&:first-child {
					color: #888888;
				}
				&:last-child {
					color: #007aff;
				}
			}
		}
		.picker-view {
			width: 100%;
			height: 476rpx;
			margin-top: 20rpx;
			.item {
				height: 68rpx !important;
				line-height: 68rpx;
				text-align: center;
				color: #000;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}

</style>